<template>
  <el-table border :data="data.tableData" row-key="id">
    <el-table-column
        v-for="header in data.headers"
        :prop="header.prop"
        :label="header.label"
    />
    <!-- 操作列 begin -->
    <el-table-column fixed="right" label="操作">
      <template #default="{row}">
        <v-button :disabled="row.level === 4" v-permission="`btn.Permission.add`"
                  @click="addMenu(row)" v-if="row.level !== 4" :text="row.level === 3 ? '添加功能' : '添加菜单'"/>
        <v-button type="primary" v-permission="`btn.Permission.update`" @click="updateMenu(row)" text="编辑"/>
        <v-button type="danger" :disabled="row.id === 1" v-permission="`btn.Permission.remove`" v-if="row.id !== 1"
                  text="删除" @click="deleteMenu(row)"/>
      </template>
    </el-table-column>
    <!--操作列 end -->
  </el-table>
  <el-dialog
      v-model="data.dialogVisible"
      :title="data.isAdd? '新增': '编辑'"
      width="500"
  >
    <el-form ref="formRef" :model="data.form">
      <el-form-item
          label="名称"
          prop="name"
          :rules="[{ required: true, message: '请填写名称', trigger: 'blur' }]"
      >
        <v-input v-model="data.form.name" :width="data.width"
        />
      </el-form-item>
      <el-form-item
          label="权限"
          prop="code"
          :rules="[{ required: true, message: '请填写权限', trigger: 'blur' }]"
      >
        <v-input v-model="data.form.code" :width="data.width"/>
      </el-form-item>
      <el-form-item
          label="路由"
          prop="route"
          :rules="[{ required: true, message: '请填写路由', trigger: 'blur' }]"
      >
        <v-input v-model="data.form.route" :width="data.width"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <v-button @click="cancel" text="取消"/>
        <v-button type="primary" @click="submit" text="确定"/>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref, inject} from 'vue'
import {getMenuListApi, addMenuApi, deleteMenuApi, updateMenuApi} from '@/api/menu'

let $message: any = inject('$message')
let $messageBox: any = inject('$messageBox')

const data = reactive({
  headers: [
    {
      prop: 'name',
      label: '名称'
    },
    {
      prop: 'code',
      label: '权限'
    },
    {
      prop: 'route',
      label: '路由'
    },
    {
      prop: 'updatedTime',
      label: '修改时间'
    }
  ],
  tableData: [],
  dialogTitle: '',
  dialogVisible: false,
  form: {
    name: '',
    code: '',
    route: ''
  },
  width: 350,
  formRules: {
    name: [
      {required: true, message: '请填写名称', trigger: 'blur'},
    ],
    code: [
      {required: true, message: '请填写权限', trigger: 'blur'},
    ],
  },
  currentMenu: undefined,
  isAdd: true,
})

const formRef = ref()

onMounted(() => {
  getMenuList()
})

const addMenu = (row) => {
  data.isAdd = true
  data.dialogVisible = true;
  data.dialogTitle = row.level !== 1 ? '新增功能' : '新增菜单';
  data.currentMenu = row;
}

const cancel = () => {
  formRef.value.resetFields();
  data.dialogVisible = false;
}

const submit = () => {
  formRef.value.validate((isValid) => {
    if (isValid) {
      if (data.isAdd) {
        const params = {
          ...data.form,
          pid: data.currentMenu.id,
          level: data.currentMenu.level + 1
        }
        addMenuApi(params).then(res => {
          if (res.status === 0) {
            getMenuList()
            formRef.value.resetFields();
            data.dialogVisible = false;
            $message.success('添加成功')
          } else {
            $message.success('添加失败')
          }
        })
      } else {
        const params = {
          ...data.form,
          pid: data.currentMenu.pid,
          level: data.currentMenu.level
        }
        updateMenuApi(data.currentMenu.id, params).then(res => {
          if (res.status === 0) {
            getMenuList()
            formRef.value.resetFields();
            data.dialogVisible = false;
            $message.success('修改成功')
          } else {
            $message.success('修改失败')
          }
        })
      }

    }
  })
}

const updateMenu = (row) => {
  data.isAdd = false;
  data.form.code = row.code;
  data.form.name = row.name;
  data.form.route = row.route
  data.dialogVisible = true;
  data.currentMenu = row;
}

const deleteMenu = (row) => {
  $messageBox.confirm(
      `确定删除${row.name}吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteMenuApi(row.id).then(res => {
      if (res.status === 0) {
        $message.success('删除成功')
        getMenuList();
      } else {
        $message.error('删除失败')
      }
    })
  })
}

const getMenuList = () => {
  getMenuListApi().then((res) => {
    if (res.status === 0) {
      data.tableData = res.data
    }
  })
}
</script>
<style scoped lang="scss"></style>
